<style lang="scss" scoped>
.index{
    width: 100vw;
    height: 100vh;
    background: url("../assets/bg.jpg") no-repeat;
    background-size: cover;
}
header{
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 40px;
    line-height: 60px;
    height: 60px;
    color: #fff;
    font-size: 20px;
    background:#3B355B ;
}
.filters{
    width: 30vw;
    height: calc(100vh - 60px);
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba($color: #fff, $alpha: .4);
    padding: 0 20px;
    box-sizing: border-box;
}
ol{
    display: flex;
    justify-content: space-around;
    text-align: center;
    color: #363636;
    font-size: 24px;
    li{
        position: relative;
        height: 90px;
        width: 17%;
        line-height: 90px;
        &::after{
            content: "";
            display: block;
            width: 100%;
            height: 2px;
            position: absolute;
            bottom: 0;
            left: 0;right: 0;
            margin: auto;
            background: #363636;
        }
    }
    li.current{
        color: #3A5CBE;
        &::after{
            background: #3A5CBE;
        }
    }
}
ul {
    margin-top: 20px;
    padding: 0 20px;
    font-size: 22px;
    color: #363636;
    li{
        height: 70px;
        line-height: 70px;
        position: relative;
        &::after{
            width: 100%;
            content: "";
            position: absolute;
            height: 1px;
            width: 100%;
            bottom: 0;
            left: 0;
            background: #cdcdcd;
        }
        i{
            float: right;
            line-height: 70px;
            font-size: 38px;
        }
    }
}
.el-icon-success{
    color: #67C23A;
}
.btns{
    position: absolute;
    bottom: 80px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    button{
        width: 20%;
        font-size: 20px;
    }
}
</style>
<template>
    <div class="index">
        <header>智慧灯杆</header>
        <pole/>
        <div class="filters">
            <ol>
                <li class="current">顶端</li>
                <li>中上端</li>
                <li>中下端</li>
                <li>底端</li>
            </ol>
            <ul>
                <li>1.微基站天线
                   <i class="el-icon-circle-check" ></i>
                </li>
                <li>2.照明光源
                    <i class="el-icon-success"></i>
                </li>
                <li>3.环境检测<i class="el-icon-circle-check" ></i></li>
                <li>4.5G物联感应装置<i class="el-icon-circle-check" ></i></li>
            </ul>
            <div class="btns">
                <el-button>清空</el-button>
                <el-button>完成</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import pole from "@/components/pole/index"
export default {
    data(){
        return {
            check:false
        }
    },
    components:{
        pole
    }
}
</script>